import React, { useEffect,useState,useContext,useReducer,createContext} from 'react';
import styles from './guiji.css';
import ReactDom from 'react-dom';
import {MapboxScene,LineLayer,AMapScene,LayerContext,SceneContext} from '@antv/l7-react'


// const Guiji=React.memo(
  function Guiji(){
  const [data,setData]=React.useState();
  React.useEffect(()=>{
  const fetchData = async () => {
    const response = await fetch(
      'https://gw.alipayobjects.com/os/basement_prod/5592c737-1c70-4d6b-82c1-e74e5a019b04.json',
    );
    const adddata = await response.json();
    console.log('nei:');
    // console.log(data);
    await setData(adddata);
    // console.log(adddata['features'][0]);
  };
  fetchData();
}, []);

// const layerontex=useContext(LayerContext)
return (
  <div>
    <AMapScene
      map={{
        center: [ 129, 40.7128 ],
        pitch: 0,
        zoom: 14,
        style:'fresh',
        // style: 'amap://styles/normal',
        // token:'pk.eyJ1IjoibGl3ZnRjIiwiYSI6ImNrOTFncXIzdTAzc2QzZXBtZmpleDN5ODAifQ.6HpxHkfUbjikIBr3nMbV4w',
        token:
          '9aa7b303616ac1985aaa14859d1f556e',
      }}
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
      }}
    >
      {data && (
        <LineLayer
        source={{
          data:data,
          parser:{
            type:'json',
            coordinates:'path'
          }
        }}
        shape={{
          values: 'line',
        }}
        size={{
          values: 1.5,
        }}
        color={{
          field: 'color',
          values:(v)=>{ return `rgb(${v})`;}
      }}
        animate={{
          interval: 1, // 间隔
          duration: 1, // 持续时间，延时
          trailLength: 6, // 流线长度
        }}>
        </LineLayer>
      ) }
    </AMapScene>
  </div>
)

}
// )


export default Guiji
